<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
    <script src="/coderunner/plugins/boot.js" type="text/javascript"></script>
    <style>
        .container{
            margin: 3px auto;
            height: 100%;
            width: 80%;
            padding: 2px;
        }
        .login-block{
            border: 1px #999999 solid;
            border-bottom: none;
        }
        .table-block{

        }
        .left{
            float: left;
        }
        .table-info{

        }
        .filed-info{

        }
        .form{}
        .form .mini-textbox{
            width: 90%;
        }
        .form .mini-textbox-border {
            border-radius: 3px;
        }
        .form-label{
            width: 100px;
        }

    </style>
</head>
<body style="height: 98%;">
    <div class="container">
        <div class="login-block" id="loginForm">
            <table style="margin: 0px auto;">
                <tr>
                    <td>
                        <label >地址：</label>
                    </td>
                    <td>
                        <input id="address"  name="address" class="mini-textbox" required="true" value="127.0.0.1"/>
                    </td>
                    <td>
                        <label >端口：</label>
                    </td>
                    <td>
                        <input id="port"  name="port" class="mini-textbox" required="true" value="3306"/>
                    </td>
                    <td>
                        <label >库名：</label>
                    </td>
                    <td>
                        <input id="dbName"  name="dbName" class="mini-textbox" required="true" value="yzpolice"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label >用户名：</label>
                    </td>
                    <td>
                        <input id="userName"  name="userName" class="mini-textbox" required="true" value="root"/>
                    </td>
                    <td>
                        <label >密码：</label>
                    </td>
                    <td>
                        <input id="passWord" name="passWord" class="mini-textbox" required="true" value="111111"/>
                    </td>
                    <td>
                        <a class="mini-button" onclick="connetToDb">连接</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="table-block">
            <div class="left" id="leftContainer" style="width: 38%;">
                <div id="tablesGrid" class="mini-datagrid" style="width:100%;height:1230px;"
                     url="" idField="id"  onrowclick="getFields"
                     allowResize="true" pageSize="20" multiSelect="true" showPager="false">
                    <div property="columns">
                        <div type="indexcolumn" width="30">序号</div>
                        <div type="checkcolumn"></div>
                        <div field="tableName" width="100" >表名称</div>
                        <div field="tableDesc" width="100"  >表描述</div>
                    </div>
                </div>
            </div>
            <div class="left" id="rightContainer"style="width: 62%">
                <div id="fieldsGrid" class="mini-datagrid" style="margin-left:1px;width:100%;height:700px;"
                     url="" idField="id"
                     allowResize="true" pageSize="20" multiSelect="true" showPager="false">
                    <div property="columns">
                        <div field="columnName" width="100">字段名称</div>
                        <div field="comment" width="100">字段描述</div>
                        <div field="dataType" width="100">数据类型</div>
                        <div field="isKey" width="100">是否主键</div>
                        <div field="notNull" width="100">是否可NULL</div>
                    </div>
                </div>
                <fieldset id="editSet" style="width:100%;height:530px;border:solid 1px #aaa;">
                    <legend>操作</legend>
                    <div id="editForm1" class="form" style="padding:5px;">
                        <table style="width:100%;">
                            <tr>
                                <td class="form-label">包    名：</td><!--style="width:80px;" style="width:150px;"-->
                                <td><input name="basePackage" class="mini-textbox" /></td>
                            </tr>
                            <tr>
                                <td class="form-label">输出路径：</td>
                                <td><input name="outputFloder" class="mini-textbox" /></td>
                            </tr>
                            <tr>
                                <td class="form-label">生成类别：</td>
                                <td>
                                    <div id="fileTypes" name="fileTypes" class="mini-checkboxlist" repeatItems="8" repeatLayout="table" textField="text" valueField="id"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="form-label">模板路径：</td>
                                <td><input name="ftlFloder" class="mini-textbox" data="[{}]"/></td>
                            </tr>
                            <tr>
                                <td class="form-label">标准包名：</td>
                                <td><input id="standardFloder" name="standardFloder" class="mini-checkbox" textField="text" valueField="id"/></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <a class="mini-button" onclick="createTemplates">生成多模板</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</body>
<script>
    mini.parse();
    var winheight =$(window).height();
    var initheight = winheight*0.98-8-59;
    var form = new mini.Form("#loginForm");
    var tablesGrid = mini.get("tablesGrid");
    var fieldsGrid = mini.get("fieldsGrid");
    var fieldForm = new mini.Form("#editForm1");
    var fileTypes = mini.get("fileTypes");
    var standardFloder = mini.get("standardFloder");
    var editSet = $("#editSet");
    var fileTypeData = [
        {id:"controller",text:"controller"},
        {id:"service",text:"service"},
        {id:"dao",text:"dao"},
        {id:"entity",text:"entity"},
        {id:"mapper",text:"mapper.xml"},
        {id:"jsp",text:"jsp"},
    ];
    fileTypes.setData(fileTypeData);
    var standardData = [
        {id:true,text:"是"}
    ];
    function resetHeight(height,isFirst){
        tablesGrid.setHeight(height.toFixed(0));
        fieldsGrid.setHeight((height*0.55).toFixed(0));
        if (isFirst==true) {
            editSet.height((height*0.45).toFixed(0));
        } else {
            editSet.height((height*0.45-15).toFixed(0));
        }

    }
    resetHeight(initheight,true);
    function connetToDb(e) {
        e.sender.disable();
        var formData = form.getData();
        var url = contextpath+"/login";
        $.post(url,formData,function (res) {
            e.sender.enable();
            if (res.success==true) {
                getTables();
            } else {
                mini.alert(res.msg);
            }
        });
    }

    function getTables(){
        var url = contextpath+"/table/list";
        $.post(url,{},function (res) {
            if (res.success==true) {
                tablesGrid.clearData();
                tablesGrid.setData(res.obj);
            } else {
                mini.alert(res.msg);
            }
        });
    }

    function getFields(e){
        var row = e.row;
        var url = contextpath+"/field/list/"+row.tableName;
        fieldsGrid.clearData();
        $.post(url,{},function (res) {
            if (res.success==true) {
                fieldsGrid.setData(res.obj);
            } else {
                mini.alert(res.msg);
            }
        });
    }

    function createTemplates(e){
        var url = contextpath+"/tpl/tables";
        var rows = tablesGrid.getSelecteds();
        if (rows==undefined || rows==null || rows.length==0) {
            mini.alert("请选择需要生成模板的表");
            return;
        }
        var formData = fieldForm.getData();
        var tables = [];
        rows.forEach(function(row,index){
            tables.push(row);
        });
        formData.tables = tables;
        console.log(tables);
        $.ajax({
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            type:'POST',
            dataType:'json',
            data:mini.encode(formData),
            url:url,
            success:function(result){
                mini.alert(result.msg);
            },
            error:function(){

            }
        })
    }
    $(window).resize(function () {
        var height = $(this).height();
        var containerHeight = height*0.98-8-59;
        resetHeight(containerHeight,false);
    });
</script>
</html>